import { queryUserDetailInfo, paginationQueryUser,batchDeleteUser } from '../../services/user/index'
import { Button, Row, Col, Input, Popconfirm, message } from 'antd';
const { Search } = Input
import { FormattedMessage, useIntl } from "umi";
import React, { useState, useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-components';
import { ROW_ID_KEY, OPERATE_ADD, OPERATE_EDIT } from '../../constants';
import { PlusOutlined, EditTwoTone, DeleteFilled } from '@ant-design/icons'
import UserOperatePanel from './components/UserOperatePanel';
function User() {
    const ref = useRef()
    const intl = useIntl();
    const [context, setContext] = useState() //模糊搜索关键词
    const [formData,setFormData] = useState()
    const [operateType, setOperateType] = useState()
    const [showPanel, setShowPanel] = useState(false)
    const [paginationData, setPaginationData] = useState({ 'current': 1, 'pageSize': 10, 'total': 0 })
    // 获取数据
    async function getData(form) {
        form.context = context
        let res = await paginationQueryUser(form);
        if (res.success) {
            let resData = {
                ...res?.data,
                data: res?.data?.records
            }
            return resData
        }
    }
    //TODO 将其抽离成一个外部方法
    let onPaginationChange = (current, pageSize) => {
        setPaginationData({ ...paginationData, current, pageSize })
        getData({ context: context, current, current, pageSize, pageSize })
    }
    let openPanel = (operateType, data, e) => {
        if(operateType === OPERATE_ADD){
            setFormData()
        }
        setShowPanel(true);
        setOperateType(operateType);
    }
    let closePanel = () => {
        setShowPanel(false)
        ref.current.reload();
    }
    const onEdit = (row) => {
        setOperateType(OPERATE_EDIT)
        setShowPanel(true);
        setFormData(row)
    }
    const onDelete = async (row) => {
        let unCodeArr = [row?.unCode]
        await batchDeleteUser(unCodeArr).then(res=>{
            if(res.success){
              message.success(res.msg)
              ref.current.reload();
            }
          })
    }
    let onSearch = (value) => {
        setContext(value)
        ref.current.reload();
    }
    const columns = [
        {
            title: '账号',
            dataIndex: 'account',
            ellipsis: true,
        },
        {
            title: '用户名',
            dataIndex: 'username',
            ellipsis: true,
        },
        {
            title: '角色',
            dataIndex: 'role',
            ellipsis: true,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'dateTime',
            hideInSearch: true,
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            hideInSearch: true,
        },
        {
            title: '最后更新时间',
            dataIndex: 'updateTime',
            valueType: 'dateTime',
            hideInSearch: true,
        },
        {
            title: '更新人',
            dataIndex: 'updateBy',
            hideInSearch: true,
        },
        {
            title: '操作',
            valueType: 'option',
            hideInSearch: true,
            width: 80,
            dataIndex: { ROW_ID_KEY },
            render: (text, row) => [
                <Button type="text" key={'edit'} shape="circle" size='small' onClick={() => { onEdit(row) }} icon={<EditTwoTone />} />,
                <Popconfirm
                    key={'delete'}
                    title={intl.formatMessage({
                        id: 'pages.Popconfirm.title',
                        defaultMessage: '确认删除'
                    })}
                    toolBar
                    description={intl.formatMessage({
                        id: 'pages.Popconfirm.description',
                        defaultMessage: '是否删除该条记录？'
                    })}
                    onConfirm={() => { onDelete(row) }}
                    okText={intl.formatMessage({
                        id: 'pages.Popconfirm.okText',
                        defaultMessage: '确认'
                    })}
                    cancelText={intl.formatMessage({
                        id: 'pages.Popconfirm.cancelText',
                        defaultMessage: '取消'
                    })}>
                    <Button type="text" danger shape="circle" size='small' icon={<DeleteFilled />} />
                </Popconfirm>,

            ],
        },
    ]
    return (
        <PageContainer ghost>
            {showPanel && <UserOperatePanel operateType={operateType} data={formData} closePanel={closePanel} />}
            <ProTable
                actionRef={ref}
                search={false}
                options={{ fullScreen: false, reload: true, density: true, setting: true }}
                columns={columns}
                request={async (form = {}) => getData(form)
                }
                pagination={{
                    pageSize: paginationData.pageSize,
                    total: paginationData.total,
                    current: paginationData.current,
                    showSizeChanger: true,
                    onChange: onPaginationChange
                }}
                rowKey={ROW_ID_KEY}
                dateFormatter="string"
                headerTitle={intl.formatMessage({
                    id: 'app.user.table.title',
                    defaultMessage: '用户管理'
                })}
                toolBarRender={() => [

                    <>
                        <Row align='middle' justify='space-between' style={{ width: '400px' }}>
                            <Col span={19}>
                                <Search
                                    style={{ width: '290px' }}
                                    placeholder={intl.formatMessage({
                                        id: 'app.user.table.toolBar.search.placeholder',
                                        defaultMessage: '请输入账号'
                                    })}
                                    onSearch={onSearch}
                                />
                            </Col>
                            <Col span={5}>
                                <Button key="3" type="primary" onClick={() => { openPanel(OPERATE_ADD) }}>
                                    <PlusOutlined />
                                    <FormattedMessage id='component.button.add' />
                                </Button>
                            </Col>
                        </Row>
                    </>,
                ]}
            >
            </ProTable>
        </PageContainer>
    )
}
export default User;
